import React, {Component} from 'react';
import Circle from './lib/Circle';

require('./css/frame.css');

export default class P9 extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      index: [1, 0],
      flag: 'none',
    };
  }

  onSlider(i) {
    let index = [0, 0];
    index[i] = 1;
    this.setState({
      index
    });
  }

  onClick() {

  }

  render() {
    const {index, flag} = this.state;
    return (
      <div id="page">
        <div className="content" id="box9">
          <h4 className="title">AID 主动信息显示屏</h4>
          {index[0] === 1 && <div className='box4Cont' id='box90'>
            <ul>
              <li> 10.3英寸液晶显示。</li>
              <li>三种不同显示模式。</li>
              <li>全新造型。</li>
            </ul>
            <img className='box9bg' src={require('./img/9_0.jpg')} />

          </div>}

          {index[1] === 1 && <div className='box4Cont' id='box91'>
            <div className='infodiv'>AID 主动信息显示屏具有单独的LED显示的信息和检查的功能。<br></br>
              请滑动鼠标浏览显示屏信息提示。</div>
            <img className='box9bg' src={require('./img/9_1.jpg')}  style={{left:43,top:150}}/>
            <Circle style={{left: '200', top: '336',textAlign:'center'}} data='转向信号 '/>
            <Circle style={{left: '180', top: '420',textAlign:'center'}} data='发动机水温'/>
            <Circle style={{left: '780', top: '420',textAlign:'center'}} data='燃油液位'/>
            <Circle style={{left: '770', top: '460',textAlign:'center'}} data='发动机检查'/>
            <Circle style={{left: '190', top: '460',textAlign:'center'}} data='警告灯'/>


          </div>}

          <div id="csld" className="sldcir" style={{left: 440}}>
            {index.map((item, i) => {
              let sr = (item === 1 ? 'son' : 'soff');
              return (
                <img key={i} src={require('./img/' + sr + '.png')} onClick={this.onSlider.bind(this, i)}/>);
            })}
          </div>

        </div>
      </div>
    );
  }
}


